@import '@wordpress/base-styles/breakpoints';
@import '@wordpress/base-styles/mixins';

.step-container-v2__content-wrapper {
	display: flex;
	align-items: center;
	gap: 3rem;
	width: 100%;
	box-sizing: border-box;
	flex: 1;

	&.axis-vertical {
		flex-direction: column;
	}

	&.axis-horizontal {
		flex-direction: row;
	}

	padding: var( --step-container-v2-content-block-padding )
		var( --step-container-v2-content-inline-padding );

	&.no-top-padding {
		padding-top: 0;
	}

	&.no-bottom-padding {
		padding-bottom: 0;
	}

	--step-container-v2-content-max-width: 1344px;

	max-width: calc(
		var( --step-container-v2-content-max-width ) + 2 *
			var( --step-container-v2-content-inline-padding )
	);

	--step-container-v2-content-column-gap: 24px;

	--step-container-v2-content-max-width-minus-column-gaps: calc(
		var( --step-container-v2-content-max-width ) - 11 *
			var( --step-container-v2-content-column-gap )
	);

	--step-container-v2-content-column-width: calc(
		var( --step-container-v2-content-max-width-minus-column-gaps ) / 12
	);

	&.center-aligned {
		justify-content: center;
		padding-bottom: calc(
			var( --step-container-v2-content-block-padding ) + var( --step-container-v2-top-bar-height )
		);
	}
}
